window.onload = function () {
  const ul = document.querySelector('ul')
  const i = document.querySelector('i')
  const yangshi = document.querySelector('.yangshi')
  const circle = document.querySelector('.circle')

  //圆点绑定鼠标按下事件
  circle.onmousedown = function (e) {
    //圆点偏移量
    let progressLeft = e.x - this.offsetLeft
    //圆点绑定移动事件
    document.onmousemove = function (e) {
      //获取鼠标坐标
      let progressX = e.x - progressLeft
      if (progressX <= 0) {
        //如果拖动超过范围条，停止拖动
        progressX = 0
      } else if (progressX >= 650) {
        progressX = 650
      }
      console.log(progressX)

          //显示进度条
    circle.style.left = progressX + 'px'
    yangshi.style.width = progressX +30+ 'px'
    //显示百分比
    i.innerHTML = Math.round(progressX / 6.5) 
    }
  //圆点绑定鼠标抬起事件
  circle.onmouseup = function (e) {
    // 取消鼠标移动事件
    document.onmousemove = null
    // 取消鼠标抬起事件
    document.onmouseup = null
  }
  //取消浏览器对拖拽内容进行搜索的默认行为
  return false
  }

}
